<template>
  <view class="checkbox-wrap">
    <!-- 开关控制 -->
    <view class="switch-container">
      <text>家族矮小史</text>
      <!-- <switch :checked="isEnabled" @change="toggleEnable" color="#00D1B6" style="transform:scale(0.8)" /> -->
      <com-switch :modelValue="isEnabled" :activeValue="true" :inactiveValue="false" @change="toggleEnable" activeColor="#00D1B6" inactiveColor="#e5e6eb" />
    </view>

    <!-- 多选列表 -->
    <view v-if="isEnabled" class="option-list">
      <view class="option-title">家族矮小成员</view>
      <view 
        v-for="(item, index) in options" 
        :key="index"
        class="option-item"
        :class="{ disabled: !isEnabled }"
        @click="toggleSelection(item, index)"
      >
        <text class="option-label">{{ item }}</text>
        <view class="checkbox" :class="{ checked: selectedValues.includes(item) }"></view>
      </view>
    </view>

		<view class="fixedBtn" @tap="sure">
			<text class="name">保存</text>
		</view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue';
import {
	useArchiveStore
} from '@/store/family-short-history';

const store = useArchiveStore()

const options = ['父亲', '母亲', '兄弟', '姐妹', '祖父', '祖母', '外祖父', '外祖母', '叔伯', '姑姨']

// 数据状态
const isEnabled = ref(!!store.selected.length);
const selectedValues = ref([...store.selected]);

// 切换选中状态
const toggleSelection = (value) => {
  if (!isEnabled.value) return;
  
  const index = selectedValues.value.indexOf(value);
  if (index > -1) {
    selectedValues.value.splice(index, 1);
  } else {
    selectedValues.value.push(value);
  }
};

// 切换启用状态
const toggleEnable = (e) => {
  isEnabled.value = e;
  if (!isEnabled.value) {
    selectedValues.value = [];
  }
};

const sortByReference = (referenceArray, selectedItems = []) => {
  // 创建索引映射表，提高查找效率
  const indexMap = new Map();
  referenceArray.forEach((item, index) => {
    indexMap.set(item, index);
  });
  
  // 排序逻辑
  return [...selectedItems].sort((a, b) => {
    const indexA = indexMap.has(a) ? indexMap.get(a) : Infinity;
    const indexB = indexMap.has(b) ? indexMap.get(b) : Infinity;
    return indexA - indexB;
  });
}

const sure = () => {
  if (isEnabled.value && selectedValues.value.length <= 0) {
    uni.showToast({
      title: '请至少选择一个成员',
      icon: 'none'
    })
    return;
  }
  selectedValues.value = sortByReference(options, selectedValues.value);
  store.updateSelected(selectedValues.value);
  uni.navigateBack();
}

// 监听初始值变化
watch(() => store.selected, (newVal) => {
  selectedValues.value = [...newVal];
});
</script>

<style scoped lang="scss">
switch[checked] .wx-switch-input.wx-switch-input-checked,
switch[checked] .uni-switch-input.uni-switch-input-checked {
  background-color: #FB5F43 !important;
  border-color: #FB5F43 !important;
}
.checkbox-wrap {
  min-height: 100vh;
  background: #F3F7F8;
  padding-bottom: 202rpx;
  padding-top: 24rpx;
  /* 开关容器 */
  .switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 32rpx;
    margin: 0 32rpx 24rpx;
    border-radius: 16rpx;
    background: #fff;
    font-size: 30rpx;
    color: #222;
    font-weight: bold;
  }
  /* 选项列表 */
  .option-list {
    padding: 32rpx 32rpx 16rpx;
    margin: 0 32rpx;
    border-radius: 16rpx;
    background: #fff;
    .option-title {
      font-size: 32rpx;
      color: #222;
      font-weight: bold;
      padding-bottom: 12rpx;
    }
  }

  /* 单个选项 */
  .option-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #E5E6EB;
  }
  
  .option-list > .option-item:last-child {
    border-bottom: none;
  }

  /* 禁用状态 */
  .option-item.disabled {
    opacity: 0.6;
  }

  /* 选项标签 */
  .option-label {
    font-size: 30rpx;
    color: #1D2129;
  }

  /* 复选框基础样式 */
  .checkbox {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    border: 2rpx solid #E5E6EB;
    // transition: all 0.2s;
    box-sizing: border-box;
  }

  /* 选中状态样式 */
  .checkbox.checked {
    border-color: #00D1B6;
    background: url("@/static/icon/checked.svg") no-repeat center;
  }

	.fixedBtn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 24rpx 0;
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		color: #fff;
		text-align: center;
		background: #fff;
		// border-top: 1rpx solid #e5e6eb;

		.name {
			display: inline-block;
			width: calc(100% - 60rpx);
			padding: 22rpx 0;
			margin: 0 30rpx;
			font-size: 32rpx;
			font-weight: 600;
			background: #00d1b6;
			border-radius: 50rpx;
		}
	}
}
</style>
